<template>
    <div class="wrapper">
        <siderBar ref="sideBarRef" @handleClickRightSideBar="handleClickRightSideBar" ></siderBar>
        <div class="container">
          <v-head :userName="userName"></v-head>
          <div class="main">
            <router-view></router-view>
          </div>
        </div>
    </div>
</template>

<script>
import vHead from "./Header.vue";
import siderBar from "./siderBar.vue";
export default {
  data() {
    return {
      userName: "",
    };
  },
  watch: {
    $route(to, from) {
        //在不同的路由之间切换，更新导航的高亮状态
      this.$nextTick(() => {
        if (to.name !== from.name) {
          let sideBarRef = this.$refs.sideBarRef;
          sideBarRef.initMenuActive();
        }
      });
    }
  },
  components: {
    vHead,
    siderBar
  },
  methods: {
    //点击右侧的导航栏
    handleClickRightSideBar(data) {
      this.$router.push({
        name: data.route,
        params: {
          type: data.value
        }
      });
    },
    //初始登录获取用户的登录信息
    getUserInfoByToken() {
      this.$http(
        "/wgl_admin/index.php?app=admin&act=user_info",
        "get",
        {},
        {},
        {},
        success => {
          this.userName = success.data.user_name; //当前的用户信息
          sessionStorage.userId = success.data.user_id; //保存当前的用户id
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    }
  },
  created() {
    if (!sessionStorage.loginMsg) {
      this.$message("请先登录");
      setTimeout(() => {
        this.$router.push({
          name: "login"
        });
      }, 1000);
      return;
    }
    this.getUserInfoByToken();
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  display: block;
  width: 100%;
  height: 100%;
  .container {
    margin-left: 180px;
    min-width: 1180px;
    height: 100%;
    .main {
      display: block;
      position: relative;
      height: 92.6%;
      overflow-y: auto;
    }
  }
}
</style>
